import React from 'react';

const GridLines = ({ rows, columns, cellSize, gap }) => {
  const spacing = cellSize + gap;
  const width = columns * spacing;
  const height = rows * spacing;
  const lines = [];

  // 网格线：垂直线
  for (let col = 0; col <= columns; col++) {
    const x = col * spacing;
    lines.push(
      <line
        key={`v-${col}`}
        x1={x}
        y1={0}
        x2={x}
        y2={height}
        stroke="#ddd"
        strokeWidth={1}
      />
    );
  }

  // 网格线：水平线
  for (let row = 0; row <= rows; row++) {
    const y = row * spacing;
    lines.push(
      <line
        key={`h-${row}`}
        x1={0}
        y1={y}
        x2={width}
        y2={y}
        stroke="#ddd"
        strokeWidth={1}
      />
    );
  }

  // 横向列编号（顶部）
  const columnLabels = Array.from({ length: columns }, (_, col) => {
    const x = col * spacing + cellSize / 2;
    return (
      <text
        key={`col-label-${col}`}
        x={x}
        y={-4}
        fontSize="10"
        textAnchor="middle"
        fill="#888"
      >
        {col}
      </text>
    );
  });

  // 纵向行编号（左侧）
  const rowLabels = Array.from({ length: rows }, (_, row) => {
    const y = row * spacing + cellSize / 2;
    return (
      <text
        key={`row-label-${row}`}
        x={-4}
        y={y}
        fontSize="10"
        textAnchor="end"
        alignmentBaseline="middle"
        fill="#888"
      >
        {row}
      </text>
    );
  });

  return (
    <g>
      {lines}
      {columnLabels}
      {rowLabels}
    </g>
  );
};

export default GridLines;